<template>
  <el-dialog
    :append-to-body="true"
    :close-on-click-modal="false"
    :title="'选择法律法规'"
    width="70%"
    :visible.sync="dialog"
    :before-close="cancelDialog">
    <div class="container-body">
      <el-form :inline="true" :model="query" class="demo-form-inline">
        <el-form-item label="文书名称">
          <el-input size="small" v-model="query.title" placeholder="文书名称" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" icon="el-icon-search" @click="onSearch" :loading="loading">搜索
          </el-button>
          <el-button size="small" icon="el-icon-delete" @click="searchReset" :loading="loading">清空</el-button>
        </el-form-item>
      </el-form>
      <el-table header-row-class-name="container-table-header" :data="data" @select="handleSelection" size="small" style="width: 100%;margin-bottom: 20px;" row-key="id" border stripe v-loading="loading">
<!--        <el-table-column type="selection" width="55" align="center"></el-table-column>-->
        <el-table-column prop="according" label="法律法规">
        </el-table-column>
        <el-table-column prop="category" label="法规分类">
          <template slot-scope="scope">
            <DictTag :options="dict.type.law_category" :value="scope.row.category"></DictTag>
          </template>
        </el-table-column>
        <el-table-column prop="publishDate" label="发布日期">
        </el-table-column>
        <el-table-column prop="activeDate" label="实施日期">
        </el-table-column>
        <el-table-column prop="chronergy" label="时效性">
          <template slot-scope="scope">
            <DictTag :options="dict.type.law_chronergy" :value="scope.row.chronergy"></DictTag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small" icon="el-icon-view" @click="openWord(scope.row)">预览</el-button>
<!--            <iframe :src="iframeUrl" frameborder="0" style="" width='100%' height='100%'></iframe>-->
          </template>
        </el-table-column>
      </el-table>
      <div class="container-page">
        <el-pagination
          @size-change="sizeChange"
          @current-change="currentChange"
          :current-page="page.current"
          :page-sizes="[10, 20, 30, 40, 50, 100]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total">
        </el-pagination>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
        <el-button @click="cancelDialog" size="small" icon="el-icon-check" type="primary">确认</el-button></span>
  </el-dialog>
</template>

<script>
import {mapGetters} from "vuex";
import {fetchList} from "@/api/adis/base/law";
import {openWindow} from "@/util/util";

export default {
  dictTypes: ['law_category', 'law_chronergy'],
  props: {
    dialog: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      loading: false,
      query: {},
      page: {
        size: 10,
        current: 1,
        total: 0
      },
      data: [],
      selectedRows: [],
      content:'',
      iframeUrl:''
    }
  },
  computed: {
    ...mapGetters(["permissions"])
  },
  watch: {
    dialog(val) {
      if (val) this.onLoad(this.page);
    }
  },
  methods: {
    onSearch() {
      this.page.current = 1;
      this.onLoad(this.page);
    },
    searchReset() {
      this.query = {};
      this.page.current = 1;
      this.onLoad(this.page);
    },
    currentChange(current) {
      this.page.current = current;
      this.onLoad(this.page);
    },
    sizeChange(size) {
      this.page.size = size;
      this.onLoad(this.page);
    },
    onLoad(page, params = {}) {
      this.loading = true;
      fetchList(Object.assign(params, this.query, page)).then(res => {
        this.loading = false;
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
      }, () => {
        this.loading = false;
      });
    },
    cancelDialog() {
      this.$emit('cancelDialog', null)
      this.content = '';
    },
    // 选择表格行
    handleSelection (selection, row) {
      // console.log(row);
      if (this.content === ''){
        this.content = row.according;
      }else{
        this.content = this.content+"\n"+ row.according;
      }
      // this.selectTotal = selection.length;
      //console.log(row);
      //console.log(selection.length);
    },
    selectedData(){
      console.log(this.selectedRows);
    },
    openWord(row){
      if (row.fileUrl) {
        const addTypeArray = row.fileUrl.split(".");
        const addType = addTypeArray[addTypeArray.length - 1];
        console.log(addType);
        if (addType === "pdf") {
          window.open(row.fileUrl,row.fileName);
        }
        //".rar, .zip, .doc, .docx, .xls, .txt, .pdf, .jpg,  .png, .jpeg,"
        else if (addType === "doc" || addType === "docx" || addType === "xls") {
          const { href } = this.$router.resolve({
            path: '/webOffice',
            query: {
              url: row.fileUrl,
              type: 'view'
            }
          });
          window.open(href, '_blank');
        }
      }
      this.cancelDialog();
      // this.iframeUrl = `https://view.xdocin.com/view?src=${row.fileUrl}`;
      // let newWindow = window.open(this.iframeUrl, '_blank'); // '_blank' 参数表示在新页面打开
      // newWindow.focus();
      // this.cancelDialog();
      // window.open(row.fileUrl)
      // // openWindow(row.fileUrl,"newWindow",800,1600);
    },

  }
};
</script>

<style>
</style>
